<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 负荷仿真结果展示 -->
    <div style="top: 1%; width: 100%;height: 56vh;float: left;display: inline-flex;">


      <div class="box1">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">电负荷</span></div>
        </div> -->

        <el-form ref="materialResourceData" :rules="materialResourceRules" label-width="100px"
                   label-suffix=":" align="left"  style="margin-top: 3vh;color: #FFFFFF;" :inline="true"
                   :model="materialResourceData">
          <el-form-item label-width="150px" label="多能流统一建模误差">
              <el-input style="width: 120px;" v-model="value1">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="仿真效率">
              <el-input style="width: 120px;" v-model="value2">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">s</i>
              </el-input>
            </el-form-item>

          </el-form>

        <div id="echartsArea1" style="width: 95%;margin: 0 auto;height: 90%;margin-top: 1vh;"></div>
      </div>


      <div class="box2">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">冷负荷</span></div>
        </div> -->

        
        <el-form ref="materialResourceData" :rules="materialResourceRules" label-width="100px"
                   label-suffix=":" align="left" style="margin-top: 3vh;color: #FFFFFF;" :inline="true"
                   :model="materialResourceData">
          <el-form-item label-width="150px" label="碳排放评估误差">
              <el-input style="width: 120px;" v-model="value3">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="承载新能源容量">
              <el-input style="width: 120px;" v-model="value4">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
              </el-input>
            </el-form-item>

          </el-form>

        <div id="echartsArea2" style="width: 95%;margin: 0 auto;height: 90%;margin-top: 1vh;"></div>
      </div>



    </div>


  </div>
</template>

<script type="text/ecmascript-6">

let name = '多能流统一建模误差'
let lineColor = "#5AC2DB"
let areaColor = ['rgba(143, 210, 240, 0.53)', 'rgba(40, 84, 126, 0.14)']
let axisData1 = [];

for(var i = 0; i <= 7000; i++){
   axisData1.push(i);
}

let seriesData1 = [
   []
]

let axisData2 = ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日']
let seriesData2 = [
   [8.57,8.646,9.746,8.867,8.841,8.863,9.796,8.416,9.677,8.038,8.649,9.455,8.651,9.176,8.861,8.019,9.138,9.143,9.234,8.651,8.937,9.333,9.687,8.105,8.187,9.235,9.452,9.877,8.238,8.693]
]


var option1 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '多能流统一建模误差',
		textStyle: {
			color: '#FFF',
			fontSize: 20
		},
		top:"1%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '3%',
      right : '3%',
      bottom : '12%',
      top : '10%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData1,
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: '单位：%',
         scale : true,
         nameTextStyle: {
             
            color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      }],
   series: [
      {
         name: "数据",
         type: "line",
         smooth: true,
         showSymbol: true,
   
         symbolSize: 12,

         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: [],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      }
      
   ]
}


var option2 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '碳排放评估误差',
		textStyle: {
			color: '#FFF',
			fontSize: 20
		},
		top:"1%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '3%',
      right : '3%',
      bottom : '12%',
      top : '10%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData2,
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: '单位：%',
         scale : true,
         nameTextStyle: {
             
            color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      },],
   series: [
      {
         name: "数据",
         type: "bar",
         smooth: true,
         showSymbol: false,
         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData2[0],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      }
      
   ]
}



  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');
  var myChart1,myChart2,myChart3;

  export default {
    name: 'simulationResult',
    components: {

    },
    data () {
      return {
        value1:"6.5",
        value2 : "5.6",
        value3 : "8.7",
        value4 : "90"
      }
    },
    mounted (){


        myChart1 = echarts.init(document.getElementById('echartsArea1'));
  
        myChart2 = echarts.init(document.getElementById('echartsArea2')); 

        myChart1.clear();
        myChart2.clear();
 
        this.$http.post("/iepsapi/project/getPageData", {}).then((res) => {
         option1.series[0].data = res.data.data;
         myChart1.setOption(option1);
        myChart2.setOption(option2); 

        window.onresize = function(){
          myChart1.resize();
          myChart2.resize(); 
        }
       })

      



    },
    methods: {
      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          var val = obj[key];
          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },


    }
  }


</script>

<style scoped >



  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{ 
    width: 49%;
    height: 102%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{ 
    width: 49%;
    height: 102%;
    margin-left: 2vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box3{
    position: relative;
    width: 100%;
    height: 99vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
